<template>
  <el-dialog
    :visible="value"
    :before-close="onCancel"
    width="30%"
    class="confirm-status-view"
  >
    <template slot="title">
      {{title}}
    </template>
    <div class="body-view">
      <div class="section-view">
        {{content}}
      </div>
      <div
        class="footer-view"
      >
        {{footText}}
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'confirm-status-dialog',
  props: {
    rowData: {
      type: Object,
      required: true,
      default: () => ({
        itemList: [],
      }),
    },
    value: {
      type: Boolean,
      default: true,
    },
    footText: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
    };
  },
  computed: {
    contentProps() {
      return this.rowData.contentProps || {};
    },
    title() {
      return this.contentProps.title;
    },
    content() {
      return this.contentProps.content;
    },
    cacheData() {
      return this.rowData.cacheData || {};
    },
  },
  methods: {
    onConfirm() {
      this.$emit('confirm', this.cacheData);
      this.onCancel();
    },
    onCancel() {
      this.$emit('input', false);
    },
  },
};
</script>

<style lang="scss">
  .confirm-status-view {
    .footer-view {
      padding-top: 25px;
      color: #999999;
      font-size: 12px;
    }
  }
</style>
